<template>
  <div>
  <div>
    <el-button type="primary" style="margin-bottom: 20px;background: #2cc8b7" @click="add" icon="el-icon-plus">添加员工</el-button>
  </div>
  <div>
  <el-table
    :data="tableData"
    style="width: 100%":row-class-name="tableRowClassName"
    row-key="id"
    border

    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column
      label="注册日期"
      width="200"
      align="center">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="账号"
      width="200"
      align="center">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <i class="el-icon-user"></i>
            <el-tag size="medium">{{ scope.row.id }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="电话"
      width="220"
      align="center">
      <template slot-scope="scope">
        <i class="el-icon-phone-outline"></i>
        <span style="margin-left: 10px">{{ scope.row.phone }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="邮箱"
      width="200"
      align="center">
      <template slot-scope="scope">
        <i class="el-icon-message"></i>
        <span style="margin-left: 10px">{{ scope.row.email }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="备注"
      width="200"
      align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.remark }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作"
                     align="center">
      <template slot-scope="scope">
        <el-button
          size="mini" type="primary" icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button
          size="mini"  type="danger" icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
      :current-page="currentPage"
      :total="total"
      :page-sizes="[10, 20, 35]"
      :page-size="pageSize"
      background
      layout="prev, pager, next, sizes, total, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

    <el-dialog title="员工信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="员工账号" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改权限" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="身份" :label-width="formLabelWidth">
          <el-radio v-model="radio" label="1">{{this.form1.remark[0]}}</el-radio>
          <el-radio v-model="radio" label="0">{{this.form1.remark[1]}}</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {selectInfo,insertInfo,user,deleteInfo,userupdate} from "../../api";

  export default {
    inject:['reload'],
    data() {
      return {
        dataList:[],
        currentPage: 1, //当前页
        pageSize: 10, //每页行数
        total: 0,
        tableData: [
        ],
        dialogFormVisible1:false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        radio: '',
        s:'',
        form: {
          id:'',
          password:'',
          name:''
        },
        form1:{
          remark:['管理员','普通员工']
        },
        formLabelWidth: '120px',

      }
    },
    methods: {

      tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 === 1) {
          return 'warning-row';
        } else{
          return '';
        }

      },
      //编辑权限
      handleEdit(index) {

        if(window.localStorage.getItem('remark')=='0')
        {
          this.$message.error("你没有该权限")
        }else{
          this.dialogFormVisible1=true
          this.s=this.tableData[index].id
        }
      },
      xiugai()
      {
        userupdate({id:this.s,remark:this.radio}).then((res=>{
            this.$message.success('修改成功')
            this.dialogFormVisible1=true
            this.reload()
        }))
      },
      //删除用户
      handleDelete(index) {
        if(window.localStorage.getItem('remark')=='0')
        {
          this.$message.error("你没有该权限")
        }else {
          this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(this.tableData[index].remark=='管理员'){
              this.$message.error('该用户是管理员')
            }else {
              deleteInfo({id: this.tableData[index].id})
                .then((res => {
                    this.$message.success('删除成功'),
                      this.reload()
                  }
                ))
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      },

      //查询员工列表
      selectInfo1()
      {
        selectInfo({id:window.localStorage.getItem('id')}).then((res=>{
          this.tableData=res.data.data
          this.dataList = res.data.data;
          this.total = res.data.data.length;
          this.handleCurrentChange(1);
          for (var i=0;i<=this.tableData.length;i++)
          {

            if(this.tableData[i].remark=='0')
            {
              this.tableData[i].remark='普通员工'
            }
            else{
              this.tableData[i].remark='管理员'
            }
            //console.log(this.tableData[i].remark)
          }

        }))
      },
      add() {
        if (window.localStorage.getItem('remark') === '0') {
          this.$message.error("你没有该权限")
        } else {
          this.dialogFormVisible = true
        }
      },
      cancel()
      {
        this.form.id=''
        this.form.password=''
        this.dialogFormVisible=false
      },

      //增加用户
      queding()
      {
          if(this.form.id!=''&&this.form.password!=''&&this.form.name!='') {
            user({id: this.form.id}).then((res => {
              if (res.data.code === 200) {
                this.$message.error('该用户已经存在')
                this.form.id=''
                this.form.password=''
                this.form.name=''
              }
              else {
                insertInfo({id: this.form.id, password: this.form.password,date:(new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()),name:this.form.name})
                  .then((res=>{
                    this.$message.success('添加成功')
                    this.form.id=''
                    this.form.password=''
                    this.form,name=''
                    this.dialogFormVisible=false
                    this.reload()
                  }))

              }
            }))
        }else{
            this.$message.error('请填写全部信息')
          }
        },


      handleSizeChange: function (pageSize) {
        this.pageSize = pageSize;
        this.handleCurrentChange(this.currentPage);
        this.handleCurrentChange(1);
      },
      //页码切换
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        this.currentChangePage(this.dataList, currentPage);
      },
      //分页方法
      currentChangePage(list, currentPage) {
        let from = (currentPage - 1) * this.pageSize;
        let to = currentPage * this.pageSize;
        this.tableData = [];
        for (; from < to; from++) {
          if (list[from]) {
            this.tableData.push(list[from]);
          }
        }
      }

    },


     created() {
      this.selectInfo1()
     }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
